<template>
    <div class="content">
        <div class="poster">
            <van-image
                :src="poster"
            />
        </div>

        <div class="link">
            <input type="text" placeholder="普通输入框" readonly id="url" :value="url" />   
            <button class="van-button van-button--primary van-button--small" type="button" @click="OnCopy">点击复制</button>
        </div>

        <div class="update">
            <van-button type="success" @click="OnUpdate">重新生成海报</van-button>
        </div>
    </div>

    <Tabbar />
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 海报 海报存储在后端的项目里，现在这是前端，那就不能直接根据路径去找这个图片
const poster = ref(business.value.poster ? business.value.poster_cdn : '');

// 推荐地址
const url = ref('');

onBeforeMount(() => {
    if(!poster.value || !url.value)
    {
        GetPosterData();
    }
})

const OnUpdate = async () =>
{
    await GetPosterData();

    proxy.$success('更新海报成功');
}

const OnCopy = () =>
{
    // 获取input
    let url = document.getElementById('url');

    // 选中地址
    url.select();
    
    // 让浏览器来执行copy命令
    document.execCommand('Copy') && proxy.$success('已复制到剪切板');
}

const GetPosterData = async () =>
{
    // 获取前端域名
    let domain = location.origin ?? 'http://localhost:5173';

    // 登录链接
    domain = domain + '/business/login';

    // 组装请求数据
    const params = {
        domain,
        busid:business.value.id
    }

    const result = await proxy.$http.post({
        url:'/sale/index',
        params
    });

    if(result.code === 1)
    {
        poster.value = result.data.poster + '?id=' + Math.random();
        url.value = result.data.link;
    }else{
        proxy.$fail(result.msg);
    }
}

</script>

<style scoped>
body{
    background-color: #eee;
}

.content{
    margin: 0 20px;
    padding: 20px 0;
}

.poster {
    width: 100%;
    margin-bottom: 20px;
}

.poster .van-image{
    width: 100%;
}

.link{
    width:90%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background:#fff;
    padding:10px;
}

.link button{
    display: inline-block;
    width:30%;
}

.link input{
    margin:0;
    margin-right:10px;
    border: none;
}

.update{
    text-align: center;
    margin: 20px auto 0;
}
</style>